<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>生日大爆炸祝福</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif;
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 50%, #a6c1ee 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow-x: hidden;
            color: #6d3b47;
            text-align: center;
            position: relative;
        }

        .container {
            max-width: 700px;
            width: 90%;
            padding: 30px 20px;
            background-color: rgba(255, 255, 255, 0.85);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 10;
            margin-top: 50px;
        }

        h1 {
            font-size: 3rem;
            margin-bottom: 10px;
            background: linear-gradient(to right, #ff758c, #ff7eb3, #6c5ce7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .subtitle {
            font-size: 1.5rem;
            color: #e84393;
            margin-bottom: 20px;
            /* 移除任何可能的背景色 */
            background: none;
        }

        .message {
            font-size: 1.3rem;
            line-height: 1.5;
            margin: 20px 0;
            padding: 0 15px;
        }

        /* 蛋糕美化 - 三层结构 - 移动端适配 */
        .cake-container {
            margin: 30px auto;
            width: 100%;
            max-width: 320px;
            height: 240px;
            position: relative;
        }

        .plate {
            width: 85%;
            max-width: 280px;
            height: 15px;
            background: #e0e0e0;
            border-radius: 10px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        }

        .cake-base {
            width: 80%;
            max-width: 270px;
            height: 80px;
            background: linear-gradient(to bottom, #ff9a9e, #fad0c4);
            border-radius: 10px 10px 0 0;
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .cake-middle {
            width: 65%;
            max-width: 220px;
            height: 70px;
            background: linear-gradient(to bottom, #fad0c4, #ff9a9e);
            border-radius: 10px 10px 0 0;
            position: absolute;
            bottom: 95px;
            left: 50%;
            transform: translateX(-50%);
        }

        .cake-top {
            width: 50%;
            max-width: 170px;
            height: 60px;
            background: linear-gradient(to bottom, #ff9a9e, #fad0c4);
            border-radius: 15px 15px 0 0;
            position: absolute;
            bottom: 165px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* 巧克力条纹 */
        .chocolate-stripe {
            position: absolute;
            height: 8px;
            background: linear-gradient(to right, #8B4513, #A0522D, #8B4513);
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .stripe-1 {
            width: 90%;
            top: 20px;
            left: 5%;
        }

        .stripe-2 {
            width: 85%;
            top: 20px;
            left: 7.5%;
        }

        .stripe-3 {
            width: 80%;
            top: 20px;
            left: 10%;
        }

        /* 奶油装饰 */
        .cream {
            position: absolute;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }


        .cream-dot {
            width: 12px;
            height: 12px;
        }

        /* 水果装饰 */
        .fruit {
            position: absolute;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .strawberry {
            width: 20px;
            height: 20px;
            background: radial-gradient(circle at 30% 30%, #ff4d4d, #cc0000);
        }

        .blueberry {
            width: 15px;
            height: 15px;
            background: radial-gradient(circle at 30% 30%, #4d79ff, #0040ff);
        }

        /* 蜡烛 */
        .candles {
            position: absolute;
            top: -40px;
            width: 100%;
            display: flex;
            justify-content: space-around;
        }

        .candle {
            width: 12px;
            height: 50px;
            border-radius: 6px 6px 0 0;
            position: relative;
        }

        .candle-1 {
            background: linear-gradient(to bottom, #ff7676, #ff4d8d);
        }

        .candle-2 {
            background: linear-gradient(to bottom, #74b9ff, #0984e3);
        }

        .candle-3 {
            background: linear-gradient(to bottom, #55efc4, #00b894);
        }

        .flame {
            width: 16px;
            height: 30px;
            background: #ff9800;
            border-radius: 50% 50% 20% 20%;
            position: absolute;
            top: -30px;
            left: -2px;
            box-shadow: 0 0 10px #ff9800, 0 0 20px #ff9800;
            opacity: 0;
            transition: opacity 0.5s;
        }

        .flame.active {
            opacity: 1;
            animation: flicker 1.5s infinite alternate;
        }

        @keyframes flicker {
            0%, 100% { transform: scaleY(1) scaleX(1); }
            50% { transform: scaleY(1.1) scaleX(0.9); }
        }

        /* 按钮样式 */
        .wish-button {
            margin-top: 20px;
            background: linear-gradient(to right, #ff758c, #ff7eb3);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 50px;
            font-size: 1.3rem;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            font-weight: bold;
        }

        .wish-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .wish-button:active {
            transform: translateY(1px);
        }

        .wish-button:disabled {
            background: linear-gradient(to right, #55efc4, #00b894);
            cursor: not-allowed;
            transform: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* Emo表情气球 - 连续上浮效果 */
        .emo-balloons {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
        }

        .emo-balloon {
            position: absolute;
            width: 40px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            filter: drop-shadow(0 5px 10px rgba(0,0,0,0.2));
            bottom: -100px;
            opacity: 0;
            will-change: transform, opacity;
        }

        .emo-balloon.active {
            opacity: 1;
            animation: emo-float 15s linear forwards;
        }

        @keyframes emo-float {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(-1200px) rotate(360deg);
                opacity: 0;
            }
        }

        /* 烟花效果优化 */
        .firework {
            position: fixed;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            will-change: transform, opacity;
        }

        .firework-particle {
            position: fixed;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            will-change: transform, opacity;
        }

        .firework-explosion {
            position: fixed;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            animation: firework-explode 1s forwards;
            will-change: transform, opacity;
        }

        @keyframes firework-explode {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                opacity: 0.8;
            }
            100% {
                transform: scale(0);
                opacity: 0;
            }
        }

        .funny-message {
            display: none;
            margin-top: 20px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            animation: fadeIn 1s;
            font-size: 1.2rem;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .footer {
            margin-top: 30px;
            font-size: 0.9rem;
            color: rgba(109, 59, 71, 0.7);
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
            h1 {
                font-size: 2.2rem;
            }

            .subtitle {
                font-size: 1.2rem;
            }

            .message {
                font-size: 1.1rem;
            }

            .wish-button {
                font-size: 1.1rem;
                padding: 12px 25px;
            }

            .cake-container {
                height: 200px;
            }

            .cake-base {
                height: 65px;
                bottom: 15px;
            }

            .cake-middle {
                height: 55px;
                bottom: 80px;
            }

            .cake-top {
                height: 50px;
                bottom: 135px;
            }

            .cream-top {
                bottom: 185px;
            }

            .candle {
                height: 40px;
            }

            .flame {
                height: 25px;
                top: -25px;
            }

            .emo-balloon {
                width: 35px;
                height: 45px;
                font-size: 18px;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 20px 15px;
            }

            h1 {
                font-size: 1.8rem;
            }

            .subtitle {
                font-size: 1rem;
            }

            .message {
                font-size: 1rem;
            }

            .cake-container {
                height: 180px;
            }

            .cake-base {
                height: 55px;
            }

            .cake-middle {
                height: 45px;
                bottom: 70px;
            }

            .cake-top {
                height: 40px;
                bottom: 115px;
            }

            .cream-top {
                bottom: 155px;
            }

            .candle {
                height: 35px;
            }

            .flame {
                height: 20px;
                top: -20px;
            }

            .emo-balloon {
                width: 30px;
                height: 40px;
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
<div class="emo-balloons">
    <!-- Emo表情气球将通过JavaScript生成 -->
</div>

<div class="container">
    <h1>生日大爆炸！</h1>

    <div class="subtitle">恭喜你又成功绕太阳一圈！</div>

    <div class="message">
        <p>今天你最大，蛋糕随便吃，愿望随便许！</p>
        <p>毕竟一年只有一次，可以合法装嫩的日子！</p>
    </div>

    <!-- 三层蛋糕结构 -->
    <div class="cake-container">
        <div class="plate"></div>

        <!-- 底层蛋糕 -->
        <div class="cake-base">
            <div class="chocolate-stripe stripe-1"></div>
            <!-- 水果装饰将通过JavaScript生成 -->
        </div>

        <!-- 中层蛋糕 -->
        <div class="cake-middle">
            <div class="chocolate-stripe stripe-2"></div>
        </div>

        <!-- 顶层蛋糕 -->
        <div class="cake-top">
            <div class="chocolate-stripe stripe-3"></div>
            <div class="cream cream-top"></div>
            <div class="candles" id="candles">
                <!-- 蜡烛将通过JavaScript生成 -->
            </div>
        </div>
    </div>

    <button class="wish-button" id="wishButton">点击接收生日炸弹💣</button>

    <div class="funny-message" id="funnyMessage">
        <h3>🎉 生日特供祝福 🎉</h3>
        <p>愿你新的一岁：</p>
        <p>头发浓密，财富暴增，烦恼清零！</p>
        <p>最重要的是，永远保持18岁的心态！</p>
    </div>

    <div class="footer">
        <p>专为你定制的爆炸式祝福 💥</p>
    </div>
</div>

<audio id="birthdaySong" loop>
    <source src="https://assets.mixkit.co/music/preview/mixkit-happy-birthday-to-you-388.mp3" type="audio/mpeg">
</audio>

<script>
    // 指定的Emoji列表
    const emojis = ['🥳', '🎉', '🎂', '🎁', '✨', '🌟', '⭐', '🤩', '🎊', '🎈', '💫', '🔥', '💥', '😊', '🤗', '🙌', '👏', '👍', '💯', '🎇', '🎆', '🌸', '🌺', '🌷', '🌼', '💐', '🦄', '🐰', '🐶', '🐱', '🦁', '🐯', '🦊', '🐻', '🐼', '🐨', '🐵'];

    // 生成Emo表情气球容器
    const emoBalloonsContainer = document.querySelector('.emo-balloons');
    let balloonInterval;

    // 连续上浮气球效果
    function createContinuousBalloons() {
        // 气球数量增加到400个
        const balloonCount = 400;

        // 创建所有气球但不立即激活
        for (let i = 0; i < balloonCount; i++) {
            const balloon = document.createElement('div');
            balloon.className = 'emo-balloon';
            balloon.textContent = emojis[Math.floor(Math.random() * emojis.length)];

            // 随机位置
            balloon.style.left = `${Math.random() * 100}%`;

            // 随机大小
            const size = 30 + Math.random() * 20;
            balloon.style.width = `${size}px`;
            balloon.style.height = `${size}px`;
            balloon.style.fontSize = `${size * 0.5}px`;

            // 随机动画持续时间
            const duration = 12 + Math.random() * 8; // 12-20秒
            balloon.style.animationDuration = `${duration}s`;

            emoBalloonsContainer.appendChild(balloon);
        }

        // 连续激活气球
        const balloons = document.querySelectorAll('.emo-balloon');
        let currentIndex = 0;
        const balloonsPerSecond = 9; // 每秒释放9个气球

        balloonInterval = setInterval(() => {
            if (currentIndex >= balloons.length) {
                clearInterval(balloonInterval);
                return;
            }

            // 一次释放1个气球
            balloons[currentIndex].classList.add('active');
            currentIndex++;
        }, 1000 / balloonsPerSecond); // 调整间隔时间
    }

    // 生成蜡烛
    const candlesContainer = document.getElementById('candles');
    for (let i = 1; i <= 3; i++) {
        const candle = document.createElement('div');
        candle.className = `candle candle-${i}`;

        const flame = document.createElement('div');
        flame.className = 'flame';
        flame.id = `flame-${i}`;

        candle.appendChild(flame);
        candlesContainer.appendChild(candle);
    }

    // 添加蛋糕水果装饰
    function addCakeFruits() {
        const cakeBase = document.querySelector('.cake-base');
        const cakeMiddle = document.querySelector('.cake-middle');
        const cakeTop = document.querySelector('.cake-top');

        // 为蛋糕底层添加草莓
        for (let i = 0; i < 6; i++) {
            const strawberry = document.createElement('div');
            strawberry.className = 'fruit strawberry';
            strawberry.style.left = `${10 + i * 15}%`;
            strawberry.style.top = '15px';
            cakeBase.appendChild(strawberry);
        }

        // 为蛋糕中层添加蓝莓
        for (let i = 0; i < 5; i++) {
            const blueberry = document.createElement('div');
            blueberry.className = 'fruit blueberry';
            blueberry.style.left = `${10 + i * 20}%`;
            blueberry.style.top = '15px';
            cakeMiddle.appendChild(blueberry);
        }

        // 为蛋糕顶层添加奶油点
        for (let i = 0; i < 7; i++) {
            const cream = document.createElement('div');
            cream.className = 'cream cream-dot';
            cream.style.left = `${10 + i * 12}%`;
            cream.style.top = '12px';
            cakeTop.appendChild(cream);
        }
    }

    // 依次点亮蜡烛
    function lightCandles() {
        const flames = document.querySelectorAll('.flame');

        flames.forEach((flame, index) => {
            setTimeout(() => {
                flame.classList.add('active');
            }, index * 500); // 每根蜡烛间隔500ms点亮
        });
    }

    // 烟花效果优化
    function createFireworks() {
        const colors = ['#ff7676', '#74b9ff', '#55efc4', '#ffeaa7', '#a29bfe', '#fd79a8', '#ffeb3b', '#ff9800'];

        // 烟花数量保持适中
        const fireworkCount = 6;
        const particleCount = 60;
        const explosionDistance = 200;

        // 创建多个烟花爆炸点
        for (let i = 0; i < fireworkCount; i++) {
            // 烟花发射
            const firework = document.createElement('div');
            firework.className = 'firework';

            // 随机位置
            const startX = Math.random() * window.innerWidth;
            const startY = window.innerHeight;
            const endX = startX + (Math.random() - 0.5) * 300;
            const endY = 100 + Math.random() * (window.innerHeight / 2);

            firework.style.left = `${startX}px`;
            firework.style.top = `${startY}px`;
            firework.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];

            document.body.appendChild(firework);

            // 烟花上升动画
            const riseAnimation = firework.animate([
                { transform: `translate(0, 0)`, opacity: 1 },
                { transform: `translate(${endX - startX}px, ${endY - startY}px)`, opacity: 1 }
            ], {
                duration: 1000 + Math.random() * 500,
                easing: 'cubic-bezier(0.1, 0.8, 0.2, 1)'
            });

            // 烟花爆炸效果
            riseAnimation.onfinish = () => {
                // 移除上升的烟花
                firework.remove();

                // 创建爆炸中心
                const explosion = document.createElement('div');
                explosion.className = 'firework-explosion';
                explosion.style.left = `${endX}px`;
                explosion.style.top = `${endY}px`;
                const explosionColor = colors[Math.floor(Math.random() * colors.length)];
                explosion.style.backgroundColor = explosionColor;
                explosion.style.boxShadow = `0 0 20px ${explosionColor}, 0 0 40px ${explosionColor}`;

                document.body.appendChild(explosion);

                // 创建爆炸粒子
                for (let j = 0; j < particleCount; j++) {
                    const particle = document.createElement('div');
                    particle.className = 'firework-particle';

                    const angle = Math.random() * Math.PI * 2;
                    const distance = 100 + Math.random() * explosionDistance;
                    const duration = 8000;
                    const size = 3 + Math.random() * 5;

                    particle.style.left = `${endX}px`;
                    particle.style.top = `${endY}px`;
                    particle.style.width = `${size}px`;
                    particle.style.height = `${size}px`;
                    particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];

                    document.body.appendChild(particle);

                    // 粒子扩散动画
                    particle.animate([
                        { transform: 'translate(0, 0) scale(1)', opacity: 1 },
                        { transform: `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px) scale(0)`, opacity: 0 }
                    ], {
                        duration: duration,
                        easing: 'cubic-bezier(0.1, 0.2, 0.8, 0.1)'
                    });

                    // 移除粒子
                    setTimeout(() => {
                        if (particle.parentNode) {
                            particle.remove();
                        }
                    }, duration);
                }

                // 移除爆炸中心
                setTimeout(() => {
                    if (explosion.parentNode) {
                        explosion.remove();
                    }
                }, 1000);
            };
        }
    }

    // 特别祝福显示
    const wishButton = document.getElementById('wishButton');
    const funnyMessage = document.getElementById('funnyMessage');
    const birthdaySong = document.getElementById('birthdaySong');
    let fireworkInterval;

    wishButton.addEventListener('click', function() {
        // 禁用按钮，防止重复点击
        wishButton.disabled = true;
        wishButton.textContent = '祝福已送达！💥';

        // 显示幽默祝福
        funnyMessage.style.display = 'block';

        // 开始连续气球上浮效果
        createContinuousBalloons();

        // 依次点亮蜡烛
        lightCandles();

        // 播放生日歌
        birthdaySong.play().catch(e => {
            console.log("自动播放被阻止，需要用户交互");
        });

        // 烟花频率保持适中
        const fireworkIntervalTime = 1200;

        // 创建烟花
        createFireworks();
        fireworkInterval = setInterval(createFireworks, fireworkIntervalTime);
        setTimeout(() => {
            clearInterval(fireworkInterval);
        }, 10000);
    });

    // 页面加载时预加载音频和添加蛋糕装饰
    window.addEventListener('load', function() {
        birthdaySong.load();
        addCakeFruits();
    });

    // 页面卸载时清理资源
    window.addEventListener('beforeunload', function() {
        if (fireworkInterval) {
            clearInterval(fireworkInterval);
        }
        if (balloonInterval) {
            clearInterval(balloonInterval);
        }
    });
</script>
</body>
</html>